<template>
  <div class="home">
    <van-nav-bar
  title="智慧商城"
/>
<div class="search">
<van-search v-model="value" placeholder="搜索你要找的商品" @click="$router.push('/serch')" />
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in Homeswipe" :key="item.imgName"><img :src="item.imgUrl" alt=""></van-swipe-item>
</van-swipe>
<van-notice-bar
scrollable
  left-icon="volume-o"
  :text="Homenotice"
/>
</div>
<van-image
  width="100%"
  height="118"
  :src="HomeImage"
  @click="$router.push('/classify')"
/>
<van-grid :column-num="5" :border="false">
  <van-grid-item @click="$router.push('/classify')" v-for="(item,index) in HomeNaving" :key="index"  text="文字" >
     <van-image :src="item.imgUrl"  />
     <span class="text">{{item.text}}</span>
</van-grid-item>
</van-grid>
<div class="center">
  <p>——猜你喜欢——</p>
  <ProductPage v-for="item in HomeGoods" :key="item.goods_id" :item="item"></ProductPage>
</div>
<div class="oen"></div>
  </div>

</template>

<script>
import { HomeDate } from '@/api/home'
export default {
  name: 'HomePage',
  data () {
    return {
      value: '',
      pageId: 0,
      Homeswipe: [],
      Homenotice: '',
      HomeImage: '',
      HomeNaving: [],
      HomeGoods: []
    }
  },
  created () {
    this.HomeFn()
  },
  methods: {
    async HomeFn () {
      const res = await HomeDate(this.pageId)
      this.Homeswipe = res.data.pageData.items[1].data
      this.Homenotice = res.data.pageData.items[2].params.text
      this.HomeImage = res.data.pageData.items[3].data[0].imgUrl
      this.HomeNaving = res.data.pageData.items[4].data
      this.HomeGoods = res.data.pageData.items[6].data
      console.log(this.HomeGoods)
    }
  }

}
</script>

<style lang='less' scoped>
/deep/.van-nav-bar{
  height: 40px;
  background-color: #c21401;
  .van-nav-bar__title{
    color: #fff;
    font-size: 16px;
    line-height: 25px;
    font-weight: 700;
  }
}
/deep/.van-search{
  height: 50px;
  background-color: #f1f1f2;
  .van-search__content {
  background-color: #fff;
  height: 30px;
    margin: 10px 10px;
  border-radius: 15px;
  }
  .van-cell--borderless{
    font-size: 14px;
    line-height: 25px;
    color: #fff;
  }
  .van-icon{
    font-size: 15px;
    line-height: 25px;

  }
}
.search{
  position: relative;
 /deep/.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 25px;
  img{
    width: 375px;
    height: 200px;
  }
  }
  /deep/.van-swipe__indicator{
  width: 7px;
  height: 7px;
  margin-top: -50px;
}
/deep/.van-notice-bar{
  margin-top: -23px;
  height: 30px;
  background-color: #525252;
  .van-notice-bar__left-icon{
    font-size: 15px;
    color: #fff;

  }
  .van-notice-bar__content{
    font-size: 12px;
    color: #fff;
  }
}
}
/deep/.van-image{
  margin-top: 5px;
}
.oen{
  height: 50px;
}
/deep/.van-grid{
margin-left: 15px;
.van-grid-item__content{
  width: 50px;
  .text{
    width: 60px;
    font-size: 12px;
    margin-right: -7px;
  }
}
}
.center{
  p{
    text-align: center;
  }
}
</style>
